
<template>
    <div>
    {{  audioList[0].name }}
    <audio-player
      ref="audioPlayer"
      :audio-list="audioList.map(elm => elm.url)"
      :before-play="handleBeforePlay"
      theme-color="#ff2929"
    />
  </div>
  </template>

 <script setup lang="ts">
import { ref } from 'vue'

const audioList = ref([
    { name: '', url: ''
 }
])

const handleBeforePlay = (next) => {

      next() // Start playing
    }

</script>

<style lang="scss">

.audio-player {
    width: 30vw;
}

.audio__notice {
    display: none!important;
}

.audio__progress-wrap {
    margin-top: 1vw!important;
}



</style>